import Vue from 'vue'
import VueRouter from 'vue-router'

import { Toast } from 'vant'

// 导入store
import store from '@/store'

// 自动找里面的index.js或者index.vue
// import login from '@/views/login'
// import layout from '@/views/layout'
// import home from '@/views/home'
// import ask from '@/views/ask'
// import video from '@/views/video'
// import mine from '@/views/mine'
// import UserEdit from '@/views/mine/UserEdit'
// import article from '@/views/article'
// import search from '@/views/search'
// import SearchResult from '@/views/search/SearchResult'
// import ChatRobot from '@/views/mine/ChatRobot'

// 以下用懒加载
const login = () => import('@/views/login')
const layout = () => import('@/views/layout')
const home = () => import('@/views/home')
const ask = () => import('@/views/ask')
const video = () => import('@/views/video')
const mine = () => import('@/views/mine')
const UserEdit = () => import('@/views/mine/UserEdit')
const article = () => import('@/views/article')
const search = () => import('@/views/search')
const SearchResult = () => import('@/views/search/SearchResult')
const ChatRobot = () => import('@/views/mine/ChatRobot')

Vue.use(VueRouter)

const routes = [
  // 代表路径如果什么都没输入，就直接重定向到/login
  { path: '/', redirect: '/layout/home' },
  { name: 'login', path: '/login', component: login },
  { name: 'article', path: '/article/:id', component: article },
  { name: 'edit', path: '/mine/edit', component: UserEdit },
  { name: 'search', path: '/search', component: search },
  { name: 'ChatRobot', path: '/chat', component: ChatRobot },
  { name: 'SearchResult', path: '/search/result', component: SearchResult },
  {
    name: 'layout',
    path: '/layout',
    component: layout,
    children: [
      { name: 'home', path: 'home', component: home, meta: { needKeep: true } },
      { name: 'ask', path: 'ask', component: ask },
      { name: 'video', path: 'video', component: video },
      {
        name: 'mine',
        path: 'mine',
        component: mine,
        meta: {
          needLogin: true
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 全局前置守卫
// to：  要去哪， 路由信息对象
// from: 从来哪， 路由信息对象
// next：叫放行函数，调用这个函数，就能放行（让你访问），不调用不放行
//      $router.push能怎么用，next就能怎么用，效果一样
//      例： $router.push('/layout/home')    next('/layout/home')
//          $router.push({ name:'', query: {} })
// 把路由分为两大类： 一个是需要登录的， 一个是不需要登录的
// 对于这种需要登录的页面占少数，我就给这些页面标记一下
router.beforeEach((to, from, next) => {
  // 判断要去的是不是需要登录的页面 ---> 就看有没有标记
  if (to.meta.needLogin) {
    // 如果是去要登录的页面，先判断有没有登录
    if (store.state.tokenObj.token) {
      // 有token就是代表登录了，那就放行
      next()
    } else {
      // 建议弹出一个提示
      Toast('请先登录')
      next({
        name: 'login',
        query: {
          back: to.path
        }
      })
    }
  } else {
    // 去的是不需要登录的页面
    next()
  }
})

// 解决3.1版本后在控制台出现的警告
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) { return originalPush.call(this, location, onResolve, onReject) }
  return originalPush.call(this, location).catch(err => err)
}

export default router
